<!--
  门店管理模块
  门店管理模块
  门店管理模块
-->

<template>
  <div class="app-waper">
    <div id="app">
      <div id="top">
        <i class="el-icon-search"></i><span>筛选查询</span>
        <!--根据状态查询-->
        <div class="status">
          <span>状态</span>
          <el-select v-model="statuvalue" placeholder="全部" value="全部" @change="stateSelect">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>

        <!--根据输入字段模糊查询-->
        <div class="like">
          <span>模糊条件</span>
          <el-input class="likequery" placeholder="请输入门店名称，联系人名称，联系人手机号进行查询" v-model="input" clearable></el-input>
          <el-button type="primary" @click="queryByLike()">查找</el-button>
        </div>
      </div>
      <div id="table">
        <!--操作 : 新增,修改,删除-->
        <div id="right-waper">
          <i class="el-icon-menu" style="color: #409EFF"></i><span>数据列表</span>
          <div id="right">
            <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
            <el-button type="primary">修改</el-button>
            <el-button type="primary" @click="deleteShop()">删除</el-button>
          </div>
        </div>
        <!--表格-->
        <template>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column prop="shopId" label="序号" ></el-table-column>
            <el-table-column prop="shopName" label="门店名称"></el-table-column>
            <el-table-column prop="shopPeople" label="联系人"></el-table-column>
            <el-table-column prop="shopTel" label="手机号"></el-table-column>
            <el-table-column prop="shopAddress" label="地址"></el-table-column>
            <el-table-column prop="storeName" label="管辖仓库"></el-table-column>
            <el-table-column prop="shopState" label="状态"></el-table-column>
          </el-table>
        </template>

        <!--分页-->
        <el-pagination background layout="prev, pager, next" page-size="5" :total=total
                       @prev-click="lastPage()" @next-click="nextPage()" @current-change="currentChange"
        ></el-pagination>


        <!--模态框-->
        <!--1. 新增品牌模态-->
        <el-dialog title="新增门店信息" :visible.sync="dialogFormVisible" width="36%">
          <el-form :model="shop">
            <el-form-item label="门店名称" :label-width="formLabelWidth">
              <el-input v-model="shop.shopName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="门店联系人" :label-width="formLabelWidth">
              <el-input v-model="shop.shopPeople" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
              <el-input v-model="shop.shopTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
              <el-input v-model="shop.shopAddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="管辖仓库" :label-width="formLabelWidth">
              <el-input v-model="shop.storeName" autocomplete="off"></el-input>
            </el-form-item>
            <div class="myradio">
              <span> 门店状态: </span>
              <el-radio v-model="shop.radio" label="1">开业</el-radio>
              <el-radio v-model="shop.radio" label="2">停业</el-radio>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <!--提交按钮-->
            <el-button type="primary" @click="insertShop()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name:"index",


    /*======================================================相当于data*/
    data(){
      return{
        value:"7",
        desc:"b",
        dialogTableVisible: false,
        dialogFormVisible: false,
        update: false,
        formLabelWidth: '100px',
        /*状态*/
        state:"全部",
        options: [{
          value: '开业',
          label: '开业'
        }, {
          value: '停业',
          label: '停业'
        }, {
          value: '全部',
          label: '全部'
        }],
        /*分页:后端传递的所有数据记录*/
        total:null,
        statuvalue: '',
        /*输入字段模糊查询*/
        input: '',
        /*1. 后端发过来的查询到的表格的所有的数据(表格数据)*/
        tableData:[],
        /*页码数*/
        pageIndex:1,
        /*新增门店*/
        shop:{
          shopName:'',
          shopPeople:"",
          shopTel:'',
          shopAddress:"",
          storeName:"",
          /*状态*/
          radio:"1",
        },

      }
    },
    /*===========================================================方法区*/
    methods:{
      //2. 下一页
      nextPage: function () {
        let $this = this;
        let $nextPageIndex = ++$this.pageIndex;
        request.post("http://192.168.40.7:8080/shop/findAll",{
          "pageIndex":$nextPageIndex
        }).then(function (data) {
          $this.shopStatefunc(data);
          $this.tableData = data.data.list;
        })
      },
      //3. 上一页
      lastPage: function () {
        let $this = this;
        let $prevPageIndex = --$this.pageIndex;
        request.post("http://192.168.40.7:8080/shop/findAll",{
          "pageIndex":$prevPageIndex
        }).then(function (data) {
          $this.shopStatefunc(data);
          $this.tableData = data.data.list;
        })
      },
      //4. 当前页
      currentChange:function(PageIndex){
        let $this = this;
        request.post("http://192.168.40.7:8080/shop/findAll",{
          "pageIndex":PageIndex
        }).then(function (data) {
          $this.shopStatefunc(data);
          $this.tableData = data.data.list;
        })
      },
      //5. 模糊查询
      queryByLike: function () {
        let $this = this;
        request.post("http://192.168.40.7:8080/shop/findByLike",{
          inputTest:$this.input,
        })
          .then(function (data) {
            console.log(data);
            $this.likeshopStatefunc(data);
            console.log(data);
            $this.tableData = data.data;
          })
      },
      //7. 状态查询
      stateSelect: function () {
        let $this = this;
        console.log($this.statuvalue);
        //停业
        if($this.statuvalue == "停业"){ //停业 1
          request.post("http://192.168.40.7:8080/shop/findByState",{state:1}).then(function (data) {
            console.log(data);
            $this.likeshopStatefunc(data);
            $this.tableData = data.data;
          })
        }
        if($this.statuvalue == "开业"){ //开业 0
          request.post("http://192.168.40.7:8080/shop/findByState",{state:0}).then(function (data) {
            console.log(data);
            $this.likeshopStatefunc(data);
            $this.tableData = data.data;
          })
        }
        if($this.statuvalue == "全部"){ //开业 0
          request.post("http://192.168.40.7:8080/shop/findAll",{pageIndex:$this.pageIndex}).then(function (data) { //成功
            console.log(data);
            $this.shopStatefunc(data);
            console.log(data);
            $this.tableData = data.data.list;
          })
        }


      },
      //8. 新增
      //新增
      insertShop:function () {
        let $this = this;
        request.post("http://192.168.40.7:8080/shop/insertShopPo",{
          "shop":$this.shop
        }).then(function (data) {
          console.log(data);
          /*执行成功后关闭模态框*/
        })
      },

      //9. 修改
      updateShop:function(){

      },
      //复选框触发后的数据
      checkIndex:function(objcet){ //object代表的是当前行的所有数据
        let $this = this;
        $this.checkArrayObj = objcet;
        console.log($this.checkArrayObj[0].brandName);
        //将值赋值到brand中去,然后选一些数据渲染到模态框中去
        $this.brand.brandId = $this.checkArrayObj[0].brandId;
        $this.brand.brandBigClass = $this.checkArrayObj[0].brandBigClass;
        $this.brand.brandFirst = $this.checkArrayObj[0].brandFirst;
        $this.brand.brandDes = $this.checkArrayObj[0].brandDes;
        $this.brand.brandName = $this.checkArrayObj[0].brandName;
      },
      //10. 批量删除
      deleteShop:function(){
        let $this = this;
        console.log("删除");
        let chs = $this.checkArrayObj; //获取到的是选中框的索引 根据用户操作顺序不同可能出现 [0,2,1] [2,0,1] [1,0,2] 所以删除之前应该先排序
        let listnum=[];
        for(let i=0;i<chs.length;i++){
          listnum.push(chs[i].brandId);
        }
        listnum= listnum.sort(function(a,b){return a-b});

        //后端删除
        //将listnum保存的值发送到后端,保存的是每行数据的brandId,后端根据id删除
        request.post("http://192.168.40.7:8080/brand/deletBrand",{
          list:listnum
        })

        //前端删除
        for (let i = listnum.length-1; i >=0 ; i--) {
          this.tableData.splice(listnum[i],1);
        }
        $this.checkArrayObj.length = 0;
      },

      //创建一个方法用于修改开业和停业的
      shopStatefunc:function (data) {
        for(let i=0;i<data.data.list.length;i++){
          if(data.data.list[i].shopState == 0){
            data.data.list[i].shopState = "开业"
          }
          if(data.data.list[i].shopState == 1){
            data.data.list[i].shopState = "停业"
          }
        }
      },
      //创建一个方法,用于修改,模糊查询后开业停业状态的
      likeshopStatefunc:function (data) {
        for(let i=0;i<data.data.length;i++){
          if(data.data[i].shopState == 0){
            data.data[i].shopState = "开业"
          }
          if(data.data[i].shopState == 1){
            data.data[i].shopState = "停业"
          }
        }
      }
    },

    /*==========================================生命周期*/
    mounted(){

      //1. 显示所有页
      let $this=this;
      request.post("http://192.168.40.7:8080/shop/findAll",{pageIndex:$this.pageIndex}).then(function (data) { //成功
        console.log(data);
        $this.shopStatefunc(data);
        console.log(data);
        $this.tableData = data.data.list;
        //将数据的条数记录到total中
        $this.total=data.data.total
      })

    }

  }
</script>




<style scoped>
  .changku{
    text-align: center;
  }
  .myradio{
    position: relative;
    left: 50px;
  }
  .myradio>span{
    position: relative;
    left:-20px;
  }
  .el-icon-menu{
    font-size: 40px;
  }
  .status,.like{
    display: inline-block;
  }
  .status{
    margin-left: 80px;
  }
  .like{
    margin-left: 274px;
  }
  .app-waper{
    /*background-color: rgba(242, 242, 242, 1);;*/
  }
  #app{
    /*width: 80%;*/
    /*height: 600px;*/
    /*background-color: skyblue;*/
    /*margin-left: 20%;*/
    margin: 2%;
  }
  #top{
    margin-bottom: 5px;
    height: 40px;
    /*background-color: rgba(204, 204, 204, 1);;*/
  }
  #top>span{
    position: relative;
    left: 20px;
  }
  #top>.el-icon-search{
    margin-left: 10px;
    font-weight: bold;
  }
  /*下拉菜单样式*/
  .el-dropdown-link {
    cursor: pointer;
    /*color: #409EFF;*/
    width: 60px!important;
    height: 30px!important;
  }
  /*模糊查询*/
  .likequery{
    display: inline-block;
    width: 400px;
  }
  #right-waper{
    /*background-color: rgba(204, 204, 204, 1);*/
    width: 100%;
    height: 42px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
  }
  #right-waper>span{
    position: relative;
    top: -9px;
    left: 20px;
  }
  #right{
    float: right;
    margin-right: 20px;
  }
  #right .el-button{
    /*background-color: rgba(102, 102, 102, 1);*/
    width: 84px;
    height: 40px;
  }
  .like .el-button{
    /*background-color: rgba(102, 102, 102, 1);*/
    width: 84px;
    height: 40px;
  }
  .app-waper{
    padding:8px;
    overflow: hidden;
    position: relative;
  }
</style>











